<template>
	<view class="lazwraper" >
			<image v-if="imgsrc" class="img" :style="[itemStyle]" :class="{'img-full':full}" mode="mode" :src="imgsrc"></image>
			<image v-if="!imgerror && !imgsrc" class="imgload" :style="[itemStyle]" :class="{'img-full':full}" mode="mode"  :src="loadingImg"></image>
			<image v-if="imgerror" class="img" :style="[itemStyle]" :class="{'img-full':full}" mode="mode"  :src="errorImg"></image>
	</view>
</template>

<script>
	export default{
		
		props:{
			src:{},
			mode:{},
			ratio:{},
			size:{
				default:30
			},
			full:{
				type:Boolean,
				default:false
			},
			loadingImg: {
				default:''
			},
			errorImg: {
				type: String,
				default: ''
			},
		},
		computed:{
			itemStyle(){
				return{
					width:`${this.size*2}rpx`,
					height:`${this.size*2}rpx`
				}
			}
			
		},
		data(){
			return{
				imgsrc:'',
				imgerror:false
			}
		},
		mounted() {
			// #ifdef H5
			// let img = new Image();
			// img.addEventListener('load',()=>{
			// 	setTimeout(()=>{
			// 		this.imgsrc = this.src
			// 	},Math.floor(Math.random()*1000+1)) 
			// })
			// img.addEventListener('error',()=>{
			// this.imgerror = true
			// })
			// img.src = this.src;
			// // #endif
			if(this.$fn.isHasImg(this.src)){
				this.errorImg = true
			}
		
			// setTimeout(()=>{
			// 	this.imgsrc = this.src
			// },1500)
			
		},
	}
</script>

<style lang="scss" scoped>
	.lazwraper{
		
		.img{
			will-change: transform;
			animation: show 1s;
		}
		.imgload{
			will-change: transform;
			animation: hide .5s;
		}
		.img-full{
			width:100%;
			height: 100%;
		}
	}
	@keyframes show{
		0%{opacity: 0;}
		100%{opacity: 1;}
	}
	@keyframes hide{
		0%{opacity: 0;}
		100%{opacity: 1;}
	}
</style>
